<template>
    <div class="rootView">
        <!-- 订单顶部进度条 -->
        <div class="dd-steps flex-center-align">
            <div class="step-box">
                <el-steps
                    :active="progress + 1"
                    align-center
                    finish-status="success"
                >
                    <el-step title="拍下服务"></el-step>
                    <el-step title="支付完成"></el-step>
                    <el-step title="服务中"></el-step>
                    <el-step title="服务完成"></el-step>
                    <el-step title="已评价"></el-step>
                </el-steps>
            </div>
        </div>

        <!-- 订单详情 -->
        <div class="dd-info1">
            <div class="bold fz18 mb20">订单详情</div>
            <el-form :label-position="labelPosition" :inline="true">
                <el-form-item label="订单编号：">
                    <span>{{ orderDetail.order_no }}</span>
                </el-form-item>
                <el-form-item label="交易时间：">
                    <span>{{ orderDetail.createtime_text }}</span>
                </el-form-item>
                <el-form-item label="服务名称：">
                    <span>{{ orderDetail.shop_name }}</span>
                </el-form-item>
                <el-form-item label="服务金额：">
                    <span>{{ orderDetail.money }}元</span>
                </el-form-item>
                <!-- <el-form-item label="联系人：">
          <span>{{ orderDetail.username }}</span>
        </el-form-item>
        <el-form-item label="联系电话：">
          <span>{{ orderDetail.mobile }}</span>
        </el-form-item>
        <el-form-item label="服务备注：">
          <span class="fwbz ellipsis2">{{ orderDetail.remark }}</span>
        </el-form-item> -->
            </el-form>
            <!-- <div class="border">
        <img src="~/assets/images/service/border.png" alt="" class="img100" />
      </div> -->
        </div>

        <div class="dd-info2 flex-between">
            <div class="left flex">
                <img :src="serviceInfo.logo" alt="" />
                <div>
                    <div class="fz18">{{ serviceInfo.name }}</div>
                    <div class="tip flex-center-align fz12">
                        {{ getServiceType(serviceInfo.type) }}
                    </div>
                    <div class="local c999 flex-align fz12">
                        <i class="el-icon-location c999 mr10"></i
                        ><span>{{ serviceInfo.city }}</span>
                    </div>
                </div>
            </div>
            <div class="right pointer">
                <!-- <div class="btn2 flex-center-align" @click="openKefu">
                    <i class="el-icon-s-comment mr10 fz16 cff4"></i>
                    <span>在线咨询</span>
                </div> -->
            </div>
        </div>
        <div class="dd-line">
            <div></div>
        </div>
        <!-- <div v-if="orderDetail.status == 0" class="dd-info2 dd-voucher">
            <div class="voucher-top flex-between">
                <div class="flex">
                    <img src="~/assets/images/userCenter/coupon.png" alt="" />
                    使用代金券
                </div>
                <div>
                    <template v-if="couponObj">
                        代金券：<span>-￥{{ couponObj.voucher_reduce }}</span>
                    </template>
                </div>
            </div>
            <div class="tags">
                <div
                    class="tag"
                    :class="{
                        'tag-active': couponListShow > 0,
                        'tag-none': orderDetail.voucher_id,
                    }"
                    @click="couponDialogShow"
                >
                    <template v-if="couponObj">
                        优惠￥{{ couponObj.voucher_reduce }}
                    </template>
                    <template v-else>
                        {{
                            couponListShow > 0
                                ? `${couponListShow}张可用`
                                : "暂无优惠>"
                        }}
                    </template>
                </div>
            </div>
        </div> -->

        <div class="dd-pay">
            <!-- 订单支付方式 -->

            <div class="pay-main">
                <div class="b-payment" v-if="orderDetail.status == 0">
                    <div class="step-pay">
                        <div class="ch_pay bold fz18">请选择支付方式</div>
                        <div class="pay-nav flex">
                            <span
                                class="pay flex-center-align"
                                @click="payOnline = true"
                                >在线支付</span
                            >
                            <!-- <span
            class="pay flex-center-align"
            :class="{ pay_s: !payOnline }"
            @click="payOnline = false"
            >线下汇款</span
          > -->
                        </div>
                    </div>
                    <!-- 线上支付 -->
                    <div class="online-pay flex mb70" v-if="payOnline">
                        <div
                            class="payment flex-center-align pointer"
                            :class="{
                                paymentCurrent:
                                    select_pay_type == item.pay_type,
                            }"
                            v-for="(item, index) in paymentList"
                            :key="index"
                            @click="select_pay_type = item.pay_type"
                        >
                            <img
                                src="~/assets/images/service/pay_check1.png"
                                class="selectIcon"
                                v-if="select_pay_type == item.pay_type"
                            />
                            <img
                                src="~/assets/images/service/pay_check0.png"
                                class="selectIcon"
                                v-if="select_pay_type != item.pay_type"
                            />
                            <img :src="item.icon" class="icon" alt="" />

                            <span>{{ item.name }}</span>
                        </div>
                    </div>

                    <el-checkbox v-model="agree" true-label="1" false-label="0">
                    </el-checkbox>
                    <span class="agree">
                        我已同意
                        <span @click.stop="goService()" class="c666 pointer"
                            >《小竹财税合同协议》</span
                        >
                    </span>

                    <div class="pay-btn flex-center-align">
                        <template v-if="couponObj">
                            <span>优惠: </span>
                            <div class="fz20 bold cff4 mr30">
                                ￥{{ couponObj.voucher_reduce }}
                            </div>
                        </template>
                        <span>实付总额: </span>
                        <div class="fz30 bold cff4 mr30">
                            ￥{{
                                couponObj
                                    ? orderDetail.money -
                                      couponObj.voucher_reduce
                                    : orderDetail.money
                            }}
                        </div>
                        <span
                            v-if="
                                userInfo && serviceInfo.user_id != userInfo.id
                            "
                            class="btn"
                            @click="submit"
                            >立即付款</span
                        >
                    </div>
                </div>

                <div
                    class="step-judge"
                    v-if="showPingjiaZhong || showPingjiaSuccess"
                >
                    <div class="jd-tit bold fz18">服务评价</div>
                    <div class="jd-box">
                        <!-- 评价-输入框 -->
                        <div class="w-judge" v-if="showPingjiaZhong">
                            <div class="jd-star flex-align">
                                <div class="fz18 mr10">满意度</div>
                                <el-rate
                                    v-model="starValue"
                                    :colors="['#FFC847', '#FFC847', '#FFC847']"
                                ></el-rate>
                            </div>
                            <div class="jd-input-box">
                                <div class="flex">
                                    <div class="pj fz18 mr10">评价</div>
                                    <el-input
                                        :rows="8"
                                        type="textarea"
                                        v-model="judge"
                                        placeholder="请输入您的评价"
                                    ></el-input>
                                </div>
                                <div
                                    class="btn flex-center-align pointer"
                                    @click="orderEvaluate()"
                                >
                                    发表评价
                                </div>
                            </div>
                        </div>

                        <!-- 评价成功 -->
                        <div class="y-judge" v-if="showPingjiaSuccess">
                            <img
                                src="~/assets/images/service/icon_judge.png"
                                alt=""
                            />
                            <div class="jd-success">评价成功</div>
                            <div
                                class="check pointer"
                                @click="
                                    showJingdu = true;
                                    showPingjia = true;
                                    showPingjiaZhong = false;
                                    showPingjiaSuccess = false;
                                "
                            >
                                查看评价
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 评价-纯展示 -->
                <div class="step-judge" v-if="showPingjia">
                    <div class="flex-between">
                        <div class="jd-tit bold fz18">服务评价</div>
                        <div
                            class="edit pointer"
                            v-if="
                                userInfo &&
                                evaluate.updatetime == null &&
                                serviceInfo.user_id != userInfo.id
                            "
                            @click="
                                showJingdu = false;
                                showPingjia = false;
                                showPingjiaZhong = true;
                                showPingjiaSuccess = false;
                            "
                        >
                            <i class="el-icon-edit"></i>
                            <span>修改</span>
                        </div>
                    </div>
                    <div class="jd-box">
                        <div class="w-judge" v-if="showPingjia">
                            <div class="jd-star flex-align">
                                <div class="fz18 mr10">满意度</div>
                                <el-rate
                                    v-model="evaluate.star"
                                    disabled
                                    :colors="['#FFC847', '#FFC847', '#FFC847']"
                                ></el-rate>
                            </div>
                            <div class="jd-input-box">
                                <div class="flex">
                                    <div class="pj fz18 mr10">评价</div>
                                    <el-input
                                        :rows="8"
                                        type="textarea"
                                        v-model="evaluate.evaluate"
                                        disabled
                                    ></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="step-service" v-if="showJingdu">
                    <div class="dd-status bold fz18">订单状态</div>
                    <div class="timeLine">
                        <div class="line-a"></div>
                        <div class="line-b"></div>
                        <div class="line-c"></div>
                        <div>
                            <div
                                class="item flex-align"
                                v-for="(item, index) in timeLine"
                                :key="index"
                            >
                                <div class="time fz14 c333">
                                    {{ item.createtime_text }}
                                </div>
                                <div class="dot"></div>
                                <div class="ms">{{ item.status_text }}</div>
                                <div
                                    v-if="
                                        userInfo &&
                                        item.status_text == '服务完成' &&
                                        orderDetail.status == 3 &&
                                        serviceInfo.user_id != userInfo.id
                                    "
                                    class="pj-btn flex-center-align pointer fz14"
                                    @click="
                                        showJingdu = false;
                                        showPingjia = false;
                                        showPingjiaZhong = true;
                                        showPingjiaSuccess = false;
                                    "
                                >
                                    去评价
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <!-- <div
            class="btn flex-center-align pointer"
            @click="sureBtn()"
            v-if="orderDetail.status == 2 && isSureBtn"
          >
            确认完成
          </div> -->
                </div>
            </div>
            <!-- </div> -->
        </div>

        <div v-html="payHtml"></div>
        <!-- 微信支付弹窗 -->
        <div class="wxPay">
            <el-dialog :visible.sync="wxPayShow" width="353px">
                <div class="ErwmToast">
                    <div class="fz22">
                        应付金额：<span class="cff4">{{
                            couponObj
                                ? orderDetail.money - couponObj.voucher_reduce
                                : orderDetail.money
                        }}</span>
                        元
                    </div>
                    <div class="erwm">
                        <iframe
                            class="iframe mt20"
                            :src="iframeSrc"
                            naem="newPage"
                        />
                    </div>
                    <div class="flex-center-align mt20">
                        <img
                            src="~/assets/images/service/icon_pay1.png"
                            class="icon"
                            alt=""
                        />
                        <div class="fz22 c333">微信支付</div>
                    </div>
                </div>
            </el-dialog>
        </div>

        <!-- 支付协议弹窗 -->
        <div class="wxXieyi">
            <el-dialog :visible.sync="wxXieyiShow">
                <div>
                    <h3 style="display: flex; justify-content: center">
                        支付协议
                    </h3>
                    <br />
                    特别提示：您在同意协议前应完整、仔细地阅读本协议，您同意并继续支付将被视为完全理解并接受以下全部协议条款。您在小竹财税平台（包含：小竹财税APP、网页和小程序端）上同意本支付协议后，即成为本支付协议之授权人，该授权即刻发生效力。您如果不同意以下协议条款，请勿进行后续操作。<br />
                    一、授权人授权“小竹财税”通过第三方支付平台划扣结算费用。结算费用是指授权人通过小竹财税平台提交的订单上记载的总费用。<br />
                    二、在授权人成功提交订单后，小竹财税依照平台上公布的收费规则计算结算费用。授权人应在5分钟内根据页面指示完成支付。
                    <br />
                    三、如因授权人在第三方支付平台中的支付账户被锁定、盗用、被往来银行拒绝或账户无效等，以致支付账户付款失败时，小竹财税有权中止与授权人之间的服务协议。<br />
                    四、授权人如有冒用、盗用他人支付账户之行为，须自行承担法律责任。<br />
                    五、如您使用第三方支付平台完成支付，第三方会通过 SDK 收集您的以下信息完成支付，请您查看第三方隐私政策了解您的信息收集和使用情形。<br />
                    六、为保障支付安全、进行正常结算及提供更好的产品服务，小竹财税将收集、记录您充值购买虚拟币并在本平台相关功能产品/服务中使用该虚拟币所产生的数据，包括但不限于充值、签到、问答等产生的行为信息、交易记录（包括交易内容、交易状态、支付方式、金额、交易时间、交易单号）和账号余额等信息。<br />
                    七、在平台上使用小竹财税的付费项目，如果授权人要求退款且小竹财税同意退款，退款会返回支付时所使用的账户。<br />
                    八、授权人同意其消费产生的结算费用以小竹财税记录的数据为准，小竹财税将通过平台告知授权人。授权人对结算费用有异议，请通过小竹财税平台站内私信联系。<br />
                </div>
            </el-dialog>
        </div>

        <el-dialog
            :visible.sync="couponShow"
            width="329px"
            :append-to-body="true"
        >
            <div class="coupon-list">
                <div
                    v-for="(item, index) in couponList"
                    :key="index"
                    v-show="voucherShow(item)"
                    class="coupon-item"
                    @click="selectCoupon(index)"
                >
                    <div class="type" :class="{ type0: item.status == 2 }">
                        <div>￥{{ item.voucher_reduce }}</div>
                        企服代金券
                    </div>
                    <div class="title">
                        <div>
                            {{ item.voucher_name }}
                        </div>
                        {{ item.endtime_text.substring(0, 10) }}到期
                    </div>
                    <div class="radio">
                        <i
                            :class="
                                checkIndex == index
                                    ? 'el-icon-success'
                                    : 'el-icon-circle-check'
                            "
                        ></i>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getServiceInfo } from "@/assets/api/service";
import { goTopSmooth } from "@/assets/utils/utils";
import { mapState } from "vuex";

import {
    getUserOrderPayData,
    getOrderDetail,
    checkOrder,
    orderEvaluate,
    serviceVoucherList,
} from "@/assets/api/userCenterApi.js";
export default {
    name: "placeorder",
    components: {},
    head() {
        return {
            title: "服务商订单-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,服务商订单",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            labelPosition: "right",
            payOnline: true, //选择线上或线下支付方式
            select_pay_type: 1, //选择支付宝还是微信支付

            starValue: 0, //评价星级
            judge: "", //评价关键词

            showJudgePage: false, //展示评价

            showPingjiaZhong: false, //展示评价中-编辑状态
            showPingjiaSuccess: false, //展示评价成功
            showPingjia: false, //展示评价-本体
            showJingdu: false, //展示进度

            evaluate: {},

            goJudge: true,
            // isSureBtn: true, //是否点击确认按钮

            agree: true,
            wxPayShow: false, //微信支付弹窗
            finishToast: false, //确定服务完成弹窗
            OfflinePayShow: false, //线下支付确认弹窗

            orderDetail: {},

            orderNo: "",
            fromName: "",
            progress: 0,
            id: "",

            payHtml: "", //支付宝支付
            iframeSrc: "", //微信二维码地址

            timeLine: [],

            paymentList: [
                {
                    name: "支付宝",
                    pay_type: 1,
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    name: "微信",
                    pay_type: 2,
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
            info: {},
            serviceInfo: {},
            wxXieyiShow: false,

            couponList: [],
            couponObj: null,
            couponShow: false,
            checkIndex: null,

            voucherShow: (item) => {
                if (item.status != 1) return false;
                let voucher_amount = Number(item.voucher_amount);
                let moeny = Number(this.orderDetail.money);
                if (moeny < voucher_amount) return false;
                else return true;
            },
        };
    },
    mounted() {
        goTopSmooth();
        this.orderNo = this.$route.query.orderNo;
        this.id = this.$route.query.id;
        this.getOrderDetail().then((res) => {
            console.log("首次初始化,当前状态=", this.evaluate);
            if (this.progress == 1 || this.progress == 2) {
                //已支付 或 已支付，未确认
                this.showJingdu = true;
                this.showPingjia = false;
                this.showPingjiaZhong = false;
                this.showPingjiaSuccess = false;
            } else if (this.progress == 3) {
                //已确认（未评价）
                this.showJingdu = true;
                this.showPingjia = false;
                this.showPingjiaZhong = false;
                this.showPingjiaSuccess = false;
            } else if (this.progress == 4) {
                //已确认（已评价）
                this.showJingdu = true;
                this.showPingjia = true;
                this.showPingjiaZhong = false;
                this.showPingjiaSuccess = false;
            }
        });
        // this.getServiceInfo();
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        couponListShow: function () {
            if (this.orderDetail.voucher_id) return 0;
            let num = 0;
            let moeny = Number(this.orderDetail.money);

            for (let item of this.couponList) {
                let voucher_amount = Number(item.voucher_amount);
                if (moeny >= voucher_amount && item.status == 1) num++;
            }
            return num;
        },
    },
    methods: {
        async getcouponList() {
            const res = await serviceVoucherList({});
            if (res.code == 1) {
                this.couponList = res.data;
                // if (this.orderDetail.voucher_id) {
                //     for (let item of res.data) {
                //         if (item.id == this.orderDetail.voucher_id) {
                //             this.couponObj = item;
                //         }
                //     }
                // }
            }
        },

        selectCoupon(index) {
            this.checkIndex = index;
            this.couponObj = this.couponList[index];
            this.couponShow = false;
        },

        couponDialogShow() {
            if (this.orderDetail.voucher_id) return;
            if (this.couponListShow > 0) {
                this.couponShow = true;
            }
        },

        //获取详情
        async getOrderDetail() {
            var params = {
                order_no: this.orderNo,
            };

            const res = await getOrderDetail(params);
            if (res.code == 1) {
                this.orderDetail = res.data;
                this.timeLine = res.data.orderstatus;
                this.progress = res.data.status;
                // this.lastSecond = res.data.countdown;

                this.getcouponList();

                if (res.data.evaluate) {
                    this.evaluate = res.data.evaluate;
                } else {
                    this.evaluate = {};
                }
                this.getServiceInfo(res.data.service_id);
                if (this.orderDetail.status == 1) {
                    this.showJingdu = true;
                }
            }
        },
        //评价
        async orderEvaluate() {
            var params = {
                order_no: this.orderNo,
                star: this.starValue,
                evaluate: this.judge,
            };
            const res = await orderEvaluate(params);
            if (res.code == 1) {
                console.log("评价成功");
                this.showJingdu = false;
                this.showPingjia = false;
                this.showPingjiaZhong = false;
                this.showPingjiaSuccess = true;
                this.getOrderDetail();
            }
        },
        //确认订单
        async checkOrder() {
            this.finishToast = false;
            var params = {
                order_id: this.orderDetail.id,
            };
            const res = await checkOrder(params);
            if (res.code == 1) {
                this.getOrderDetail();
            }
        },
        //支付按钮
        submit() {
            if (this.agree == false) {
                this.$message.warning("请勾选小竹财税合同协议");
                return;
            }
            if (!this.payOnline) {
                this.OfflinePayShow = true;
            } else {
                this.payMoney();
            }
        },
        async payMoney() {
            var params = {
                order_no: this.orderNo,
                source: "web",
                pay_type: this.select_pay_type,
            };
            if (this.couponObj && !this.orderDetail.voucher_id) {
                params.voucher_id = this.couponObj.id;
            }
            const res = await getUserOrderPayData(params);
            if (res.code == 1) {
                if (this.couponObj && !this.orderDetail.voucher_id)
                    this.orderDetail.voucher_id = this.couponObj.id;
                if (this.select_pay_type == 1) {
                    this.payHtml = res.data;
                    this.$nextTick(() => {
                        document.forms[1].submit();
                    });
                } else {
                    this.wxPayShow = true;
                    this.iframeSrc = res.data;
                    this.getWxPayType();
                }
                console.log("支付结果", res);
            }
        },

        async getWxPayType() {
            const res = await getOrderDetail({ order_no: this.orderNo });
            if (res.code == 1) {
                this.orderDetail = res.data;
                this.couponObj = null;

                if (res.data.status != 0) {
                    this.wxPayShow = false;
                    this.iframeSrc = "";
                    this.getOrderDetail();
                } else {
                    setTimeout(() => {
                        this.getWxPayType();
                    }, 2000);
                }
            }
        },

        // 打开客服
        openKefu() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            localStorage.setItem("to_zim_userid", this.serviceInfo.user_id);
            this.$router.push({
                path: "/service/servicechat",
            });
        },
        // 用户协议跳转
        goService() {
            // window.open("https://api.xiaozhucaishui.com/xieyi/pc_pay.html", "_blank");
            this.wxXieyiShow = true;
        },

        //获取服务商详情
        async getServiceInfo(id) {
            let res = await getServiceInfo({ id: id });
            if (res.code == 1) {
                this.serviceInfo = res.data.info;
                console.log("服务商详情", this.serviceInfo);
            }
        },
        getServiceType(type) {
            var text = "";
            switch (type) {
                case 1:
                    text = "官方服务商";
                    break;
                case 2:
                    text = "金牌服务商";
                    break;
                case 3:
                    text = "银牌服务商";
                    break;
                case 4:
                    text = "铜牌服务商";
                    break;
                case 5:
                    text = "普通服务商";
                    break;
                case 6:
                    text = "个人服务商";
                    break;
            }
            return text;
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootView {
    margin: 0 auto;
    width: 1200px;

    .dd-steps {
        margin-top: 25px;
        width: 100%;
        height: 188px;
        background-color: #fff;

        .step-box {
            width: 800px;
        }
    }

    .dd-info1 {
        position: relative;
        margin-top: 15px;
        padding: 30px;
        width: 100%;
        // height: 252px;
        background: #ffffff;

        .fwbz {
            max-width: 1045px;
        }

        .border {
            position: absolute;
            bottom: -5px;
            right: 0;
            width: 100%;
            height: 14px;
        }
    }

    .dd-pay {
        margin-top: 30px;
        padding-bottom: 30px;
        width: 100%;
        background: #ffffff;

        .pay-nav {
            height: 50px;
            line-height: 50px;
            background: #f4f4f4;
            border: 1px solid #f2f2f2;

            .pay {
                width: 120px;
                height: 100%;
                font-size: 14px;
                cursor: pointer;
            }
            .pay_s {
                width: 120px;
                height: 100%;
                font-size: 14px;
                cursor: pointer;
                background-color: #ffffff;
            }
        }

        .pay-main {
            width: 100%;
            border: 1px solid #f2f2f2;
            .b-payment {
                position: relative;
                padding: 40px;
                padding-bottom: 80px;

                .payment {
                    margin-top: 20px;
                    margin-right: 20px;
                    padding: 0 30px;
                    width: 210px;
                    height: 68px;
                    background: #ffffff;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #ececec;
                    font-size: 18px;

                    &.paymentCurrent {
                        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
                    }

                    .selectIcon {
                        width: 25px;
                        height: 25px;
                    }

                    .icon {
                        margin: 0 10px;
                        width: 40px;
                        height: 40px;
                    }
                }

                .offline-pay {
                    .pay-bank {
                        width: 104px;
                        height: 86px;
                    }

                    .tip {
                        margin-top: 30px;
                        margin-bottom: 50px;
                        font-size: 12px;
                        color: #999;
                    }
                }

                .pay-btn {
                    margin-bottom: 30px;
                    // width: 425px;
                    height: 42px;
                    position: absolute;
                    bottom: 12px;
                    right: 39px;

                    .btn {
                        display: inline-block;
                        text-align: center;
                        width: 140px;
                        height: 42px;
                        line-height: 42px;
                        background: #1c87f3;
                        border-radius: 4px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }
        .step-pay {
            // padding: 0 30px;

            .ch_pay {
                // padding: 0 30px;
                width: 100%;
                height: 70px;
                line-height: 70px;
            }
        }
        .step-service {
            padding: 0 30px;
            width: 100%;
            height: 100%;

            .dd-status {
                padding: 0 30px;
                width: 100%;
                height: 70px;
                line-height: 70px;
                border-bottom: 1px solid #f2f2f2;
            }

            .timeLine {
                padding: 30px;
                padding-bottom: 80px;
                background: #fff;
                position: relative;
                overflow: hidden;

                .line-a {
                    position: absolute;
                    top: 0;
                    left: 251.5px;
                    width: 2px;
                    height: 100%;
                    z-index: 1;
                    background: #ededed;
                }
                .line-b {
                    position: absolute;
                    top: 0;
                    left: 251.5px;
                    width: 2px;
                    height: 70px;
                    z-index: 2;
                    background: #ffffff;
                }
                .line-c {
                    position: absolute;
                    bottom: 0;
                    left: 251.5px;
                    width: 2px;
                    height: 90px;
                    z-index: 2;
                    background: #ffffff;
                }
                .pj-btn {
                    margin-left: 30px;
                    width: 83px;
                    height: 25px;
                    background: #ffffff;
                    border-radius: 2px;
                    border: 1px solid #666666;
                }

                .item {
                    margin-top: 35px;
                    .dot {
                        margin-left: 80px;
                        width: 8px;
                        height: 8px;
                        background: #ccc;
                        border-radius: 50%;
                        z-index: 3;
                    }

                    .ms {
                        margin-left: 80px;
                        max-width: 860px;
                        font-size: 14px;
                        color: #333;
                    }
                }
                .item:first-child .dot {
                    background: #f52f3e;
                }

                .item:first-child .dot::after {
                    position: absolute;
                    top: 65px;
                    left: 242px;
                    display: inline-block;
                    content: "";
                    width: 20px;
                    height: 20px;
                    background: rgba(227, 52, 45, 0.15);
                    z-index: -1;
                    border-radius: 50%;
                }
            }
            .btn {
                margin: 0 auto;
                width: 140px;
                height: 42px;
                background: #1c87f3;
                color: #fff;
                border-radius: 4px;
            }
        }

        .step-judge {
            padding: 0 30px;

            .jd-tit {
                padding: 0 30px;
                width: 100%;
                height: 70px;
                line-height: 70px;
                border-bottom: 1px solid #f2f2f2;
            }
            .edit {
                width: 150px;
                height: 70px;
                line-height: 70px;
            }
            .jd-box {
                padding: 0 100px;
                width: 100%;
                min-height: 500px;
                font-size: 14px;

                .jd-star {
                    width: 100%;
                    height: 80px;
                    line-height: 80px;
                }
                .jd-input-box {
                    margin-top: 35px;
                    width: 100%;
                    height: 100%;

                    .btn {
                        margin: 0 auto;
                        margin-top: 40px;
                        width: 140px;
                        height: 42px;
                        background: #1c87f3;
                        border-radius: 4px;
                        color: #fff;
                    }
                }

                .y-judge {
                    margin: 0 auto;
                    margin-top: 135px;
                    width: 200px;
                    text-align: center;
                    img {
                        width: 72px;
                        height: 72px;
                    }

                    .jd-success {
                        margin-top: 15px;
                        font-size: 26px;
                    }

                    .check {
                        margin: 0 auto;
                        margin-top: 20px;
                        text-align: center;
                        width: 140px;
                        height: 42px;
                        line-height: 42px;
                        background: #ffffff;
                        border-radius: 4px;
                        border: 1px solid #e5e5e5;
                    }
                }
            }
        }
    }
}
.ErwmToast {
    text-align: center;

    .erwm {
        display: flex;
        align-items: center;
        justify-content: center;

        .iframe {
            // width: 148px;
            // height: 148px;
            width: 333px;
            height: 333px;
            border-width: 0;
        }
    }

    .icon {
        margin-right: 5px;
        width: 30px;
        height: 30px;
    }
}
.agree {
    font-size: 14px;
    color: #9e9e9e;

    img {
        width: 14px;
        height: 17px;
    }
}

.dd-info2 {
    align-items: center;
    margin-top: 25px;
    padding: 30px;
    background-color: #fff;
    img {
        margin-right: 30px;
        width: 126px;
        height: 126px;
        object-fit: cover;
    }
    .btn2 {
        width: 117px;
        height: 42px;
        border-radius: 4px;
        border: 1px solid #ebebeb;
        font-size: 14px;
    }
    .tip {
        margin: 20px 0;
        width: 74px;
        height: 20px;
        background: #ffe6e6;
        border-radius: 50px;
        color: #e43c3c;
    }
}

.wxXieyi ::v-deep .el-dialog {
    border-radius: 8px;
    height: 500px;
    overflow: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}
.dd-line {
    height: 1px;
    background: #f0f0f2;
    border-left: 35px solid #ffffff;
    border-right: 35px solid #ffffff;
}
.dd-voucher {
    margin-top: 0;
    .voucher-top {
        img {
            width: 20px;
            height: 20px;
            margin-right: 6px;
        }
        div {
            align-items: center;
        }
        span {
            color: #ff6161;
        }
    }
    .tags {
        padding-top: 18px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .tag {
            padding: 0 15px;
            height: 32px;
            line-height: 30px;
            text-align: center;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #dcdee0;
            margin-right: 11px;
            margin-bottom: 13px;
            font-size: 12px;
            color: #323233;
            cursor: pointer;
        }

        .tag-active {
            color: #ff6161;
            border-color: #ff6161;
        }

        .tag-none {
            border-color: #c0c4cc !important;
            color: #c0c4cc !important;
        }
    }
}

.coupon-list {
    height: 262px;
    overflow-y: auto;
    margin-top: 20px;
    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #e1e1e1;
    }
    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}
.coupon-item {
    display: flex;
    align-items: center;
    width: 285px;
    height: 74px;
    background: #ffffff;
    border: 1px solid #ff6161;
    padding: 16px 20px;
    margin-bottom: 17px;
    cursor: pointer;
    .type {
        width: 70px;
        font-size: 12px;
        font-weight: 500;
        color: #ff6161;
        // text-align: center;
        div {
            font-size: 16px;
            font-weight: 700;
            color: #ff6161;
            padding-bottom: 5px;
        }
    }

    .title {
        width: 145px;
        // padding-left: 25px;
        font-size: 12px;
        font-weight: 500;
        color: #b3b3b3;
        div {
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            padding-bottom: 5px;
        }
    }
    .radio {
        font-size: 24px;
        .el-icon-circle-check {
            color: #999999;
        }
        .el-icon-success {
            color: #ff6161;
        }
    }
}
</style>

<style lang="scss" scoped>
::v-deep .el-form-item {
    min-width: 540px;
    margin-bottom: 0;
}

::v-deep .el-form-item__label {
    color: #9e9e9e;
}

::v-deep .bankInfo .el-form-item__content {
    color: #333;
    line-height: 30px;
}

::v-deep .bankInfo .el-form-item__label {
    color: #333;
    line-height: 30px;
}

::v-deep .el-rate__icon {
    font-size: 40px;
}
::v-deep .el-rate {
    height: 36px;
}

::v-deep .el-textarea {
    width: 800px;
}

::v-deep .el-dialog {
    border-radius: 8px;
    height: 328px;
}

::v-deep .el-dialog__header {
    padding: 0 !important;
}

.wxPay ::v-deep .el-dialog {
    border-radius: 8px;
    height: 500px;
}

.wxPay ::v-deep .el-dialog__body {
    padding: 30px 0 !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: #333;
}

::v-deep .el-step__title {
    font-size: 14px;
}

::v-deep .is-success {
    color: #fa5151;
    border-color: #fa5151;
}

::v-deep .el-step__title.is-success {
    color: #000;
}
</style>
